<gm:page title="My App" authenticate="false">

    <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"      type="text/javascript">
    
    </script>

    <script type="text/javascript">
      
    var centreLat = 37.78482699908615;
    var centreLon = -122.7278025;
    var map;
    
    function customGetTileURL(a,b, prefix, bounds) {
      //converts tile x,y into keyhole string
      
      if (b>10) { return prefix + "-tiles/blank-tile.png"; };

      var c=Math.pow(2,b);
      var x=360/c*a.x-180;
      var y=180-360/c*a.y;
      var x2=x+360/c;
      var y2=y-360/c;
      var lon=x; //Math.toRadians(x); //would be lon=x+lon0, but lon0=0 degrees
      var lat=(2.0*Math.atan(Math.exp(y/180*Math.PI))-Math.PI/2.0)*180/Math.PI; //in degrees
      var lon2=x2;
      var lat2=(2.0*Math.atan(Math.exp(y2/180*Math.PI))-Math.PI/2.0)*180/Math.PI; //in degrees
      var tileBounds=new GLatLngBounds(new GLatLng(lat2,lon),new GLatLng(lat,lon2));

      if (!tileBounds.intersects(bounds)) { return prefix + "-tiles/blank-tile.png"; };
        var d=a.x;
        var e=a.y;
        var f="t";
        for(var g=0;g<b;g++){
            c=c/2;
            if(e<c){
                if(d<c){f+="q"}
                else{f+="r";d-=c}
            }
            else{
                if(d<c){f+="t";e-=c}
                else{f+="s";d-=c;e-=c}
            }
        }
       
        return prefix + "-tiles/" + f + ".png";
    }

    function createCustomMap(copyrightCollection, prefix, bounds, name) {
      var tileLayers = [ G_PHYSICAL_MAP.getTileLayers()[0], new GTileLayer(copyrightCollection , 0, 17)];
      tileLayers[1].getTileUrl = function(a, b) { return customGetTileURL(a, b, prefix, bounds);};
      tileLayers[1].isPng = function() { return false; };
      tileLayers[1].getOpacity = function() { return .5; };
      return new GMapType(tileLayers, new GMercatorProjection(11), "Map", {alt: name, maxResolution:10, minResolution:0, errorMessage:"Data not available"});
     }

    function load() {
      if (GBrowserIsCompatible()) {

        var customTileLayers = [ 
        {name: "Census Tracts 1990",prefix: "tgr06075trt00", bounds: new GLatLngBounds(new GLatLng(37.63982999908733,-123.17382499999998),new GLatLng(37.929823999084974,-122.28178))},
        {name: "Congressional Districts", prefix: "tgr06075cdc", bounds: new GLatLngBounds(new GLatLng(37.63982999908733,-123.17382499999998),new GLatLng(37.929823999084974,-122.28178))},
        {name: "Landmark Polygons", prefix: "tgr06075lpy", bounds: new GLatLngBounds(new GLatLng(37.63982999908733,-123.17382499999998),new GLatLng(37.929823999084974,-122.28178))},
        {name: "Urban Areas", prefix: "UA_06075", bounds: new GLatLngBounds(new GLatLng(37.708131999086774,-122.51448299999997),new GLatLng(37.83242699908577,-122.327681))}];
        var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180), new GLatLng(90, 180)), 0, "<a href=\"http://www.casa.ucl.ac.uk\">CASA</a>");
        var copyrightCollection = new GCopyrightCollection("ESRI, GMapCreator");
        copyrightCollection.addCopyright(copyright);

        var mapTypes = [];
        mapTypes.push(G_NORMAL_MAP);
        mapTypes.push(G_PHYSICAL_MAP);

        var mapTypesControl = new GHierarchicalMapTypeControl();
        mapTypesControl.clearRelationships();
        
        for (var i = 0; i < (customTileLayers.length); i++) {
          var customMap = createCustomMap(copyrightCollection, customTileLayers[i].prefix, customTileLayers[i].bounds, customTileLayers[i].name);
          mapTypes.push(customMap);
          mapTypesControl.addRelationship(G_PHYSICAL_MAP, customMap, customTileLayers[i].name);
        }
    
        //Now create the custom map. Would normally be G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP
        map = new GMap2(document.getElementById("map"),{mapTypes:mapTypes});
        map.setCenter(new GLatLng(centreLat, centreLon), 9);
        map.addControl(new GLargeMapControl());
        map.addControl(mapTypesControl);
        map.setMapType(G_PHYSICAL_MAP);
        map.enableContinuousZoom();
      }
    }
    //]]>
    </script>

  <body onload="load()" onunload="GUnload()">
        <div id="map" style="width: 550px; height: 400px">
  </body>


</gm:page>